<template>
    <h1>Weather forecast</h1>

    <p>This component demonstrates fetching data from the server.</p>

    <p if.bind="!forecasts"><em>Loading...</em></p>

    <table if.bind="forecasts" class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            <tr repeat.for="forecast of forecasts">
                <td>${ forecast.dateFormatted }</td>
                <td>${ forecast.temperatureC }</td>
                <td>${ forecast.temperatureF }</td>
                <td>${ forecast.summary }</td>
            </tr>
        </tbody>
    </table>
</template>
